@import "../constant.scss";
.NormalPage-Component-Wrapper {
  display: flex;
  // width: 10rem;
  height: 100%;
  margin: auto;
  flex-direction: column;
  background-color: $backgroundColor;
  .Main-Nav-Wrapper{
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    .NormalPage-Content-Wrapper {
      flex: 1;
      height: 100%;
      overflow: hidden;
    }
    .NormalPage-Nav-Wrapper {
      flex-shrink: 1;
    }
  }
  .NormalPage-Header-Wrapper {
    height: $headerHeight;
  }
  
  .NormalPage_Footer_wrapper {
    height: $footerHeight;
  }
}
.HomeItem-Parent-Wrapper{
  width:100%;
  padding:40px;
  text-align: left;
  .HomeItem-Wrapper{
    width:200px;
    position:relative;
    margin-left: 20px;
    display: inline-block;
    .BackImg-box{
      position: relative;
      cursor: pointer;
      img{
        width:100%;
        height:100%;
        transition-property: transform; 
        transition-duration:0.8s;
        cursor:pointer;
        &:hover{
          transform-origin: 50% 50%;
          transform:scale(1.1,1.1);
        }
        
      }
      &:hover .Span-box{
        animation: TextDisappears 1s;
        animation-fill-mode:forwards;
      }
    }
    .Span-box{
      text-align: center;
      width:100%;
      position: absolute;
      bottom: 15px;
      color: #ffffff;
      left:0px;
      font-size:18px;
      letter-spacing: 5px;
      pointer-events: none;
    }
  } 
  
}
@keyframes TextDisappears
{
    from {opacity: 1;}
    to {opacity: 0;}
}
.MovieGallery-Parent-Wrapper{
  width:100%;
  padding:40px;
  border:1px solid transparent;
  text-align: left;
  .MovieGallery-Wrapper{
    width:200px;
    height:300px;
    position:relative;
    margin-left: 20px;
    display: inline-block;
    .BackImg-box{
      position: relative;
      cursor: pointer;
      img{
        width:100%;
        height:100%;
        transition-property: transform; 
        transition-duration:0.8s;
        &:hover{
          transform-origin: 50% 50%;
          transform:scale(1.1,1.1);
        }
      }
    }
    .Span-box{
      text-align: center;
      width:50%;
      position: absolute;
      bottom: 15px;
      color: #ffffff;
      cursor: pointer;
      font-size:18px;

    }
    .left{
      left:0px;
    }
    .right{
      right:0px;
    }
  }
}